// data-set 可以按需引入，除此之外不要引入别的包
import React from 'react';
import { Chart, Axis, Tooltip, Geom, Legend } from 'bizcharts';
import DataSet from '@antv/data-set';


// 下面的代码会被作为 cdn script 注入 注释勿删
// CDN START

const ds = new DataSet();

const scale = {
  r: {
    type: 'linear',
    min: 0,
    max: 10,
  },
};

let chartIns = null;

const getG2Instance = (chart) => {
  chartIns = chart;
};

class GroupBarChart extends React.Component {
  render() {
    const { data,column } = this.props;
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'fold',
      fields: column, // 展开字段集
      key: 'type', // key字段
      value: 'value', // value字段
    });
    return (<Chart
        height={280}
        width={window.innerWidth-30}
        forceFit
        data={dv}
        scale={scale}
        padding={[24, 'auto', 'auto', 'auto']}
        onGetG2Instance={getG2Instance}>
      <Legend

      />
      <Axis name="label" />
      <Axis name="value" position={'left'} />
      <Tooltip />
      <Geom
        type="interval"
        position="label*value"
        color={"type"}
        adjust={[{
          type: 'dodge',
          marginRatio: 1 / 32,
        }]}
      />
    </Chart>
    );
  }
}

// CDN END
export default GroupBarChart;
